<template>
  <div class="page page-full page-fit-list  has-headbar">
    <van-nav-bar
      fixed
      :z-index="100"
      left-text="15分钟健身圈"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
        <div class="right-icon icon-location" slot="right"></div>
    </van-nav-bar>
    <van-tabs class="list-tab" type="card" @click="onTabClick">
      <van-tab title="免费">
        <list :free="1"></list>
      </van-tab>
      <van-tab title="收费">
        <list :free="0"></list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant'
import List from './components/List'
import { wxjsdkMixin } from '@/components/mixins'
import { getWechatLink } from '@/libs/utils'
export default {
  mixins: [wxjsdkMixin],
  name: 'fit-list',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    List
  },
  mounted () {
    this.wechatShowMenu()
    let shareInfo = {
      title: '15分钟健身圈', // 分享标题
      desc: '运动嘉 15分钟健身圈',
      link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '', // 分享图标
      success: function () {
        console.log('分享', getWechatLink(window.location.hash))
      }
    }
    this.wechatShare(shareInfo)
  },
  methods: {
    onTabClick (index, title) {
      // 0 免费 1 收费
      // console.log(index, title)
    },
    onClickLeft () {
      this.$router.push({ name: 'home' })
    },
    onClickRight () {
      this.$router.push({ name: 'fit-map' })
    }
  }
}
</script>

<style lang="less">
.page-fit-list{
  .right-icon{
    display: inline-block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-position: center center;
  }
  .icon-location{
    background-image: url("../../assets/images/icon_location.png");
    background-size: 40/2px 48/2px;
  }
  .point-item{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  /* tabs */
   /* tabs */
  .list-tab{
    height: 100%;
    box-sizing: border-box;
  }
  .van-tabs__nav--card{
    border-color: #cbcbcb;
    border-radius: 3px;
    width: 100px;
    margin: 0 auto;
    .van-tab{
      color: @fontColorPrimary;
      border-right: none;
      &.van-tab--active{
        color: #fff;
        border-radius: 2px;
      }
      &:first-child{
        &.van-tab--active{
          background-color: @colorSuccess;
        }
      }
      &:last-child{
        &.van-tab--active{
          background-color: @colorPrimary;
        }
      }
    }
  }
  .van-tabs__track {
    height: 100%;
  }
  .van-tabs__content{
    height: 100%;
    box-sizing: border-box;
    .van-tab__pane{
      height: 100%;
    }
  }
}
</style>
